<template>
  <div>
    <!-- 标题 -->
    <app-header></app-header>
    <!-- 内容区 -->
    <div class="height"></div>
    <div class="heavy">
      <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="/img/轮播1.png" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img src="/img/轮播2.png" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img src="/img/轮播3.png" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img src="/img/轮播4.png" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img src="/img/轮播5.png" alt />
          </van-swipe-item>
        </van-swipe>
      </div>
      <img src="/img/空白.png" alt />

      <div class="content_top">
        <div class="content_top_a">
          <img src="/img/首页.png" alt />
          <div>
            <img src="/img/首页1.png" alt />
            <img src="/img/首页2.gif" alt />
          </div>
        </div>

        <div class="content_top_b">
          <img src="/img/首页2.gif" alt />
          <img src="/img/首页3.png" alt />
          <img src="/img/首页4.png" alt />
          <img src="/img/首页5.png" alt />
        </div>
      </div>

      <img src="/img/空白.png" alt />

      <div class="content_top_aa">
        <div class="content_top_aaa">
          <a href="###">
            <img src="/img/首页6.png" alt />
          </a>
          <a href="###">
            <img src="/img/首页7.png" alt />
          </a>
        </div>

        <div class="sports">
          <div class="sports_top">
            <img src="/img/首页8.png" alt />
            <img src="/img/首页9.png" alt />
          </div>
          <div class="sports_under">
            <img src="/img/首页10.png" alt />
            <img src="/img/首页11.png" alt />
          </div>
        </div>
      </div>

      <div class="content_bb">
        <div class="content_top_bbb">
          <a href="###">
            <img src="/img/首页12.png" alt />
          </a>
          <a href="###">
            <img src="/img/首页13.png" alt />
          </a>
        </div>
      </div>

      <a class="relaxation" href="###">
        <img src="/img/首页14.png" alt />
        <img src="/img/首页15.png" alt />
        <img src="/img/首页16.png" alt />
      </a>

      <a class="/shoe" href="###">
        <img src="/img/首页17.png" alt />
        <img src="/img/首页18.png" alt />
      </a>
      <a href="#" id="top">
        <van-icon name="upgrade" size="50" color="#1989fa" v-show="isshow" />
      </a>
      <p class="goods">精选好货</p>
      <div class="list">
        <ul>
          <li v-for="(item, index) in list" :key="index">
            <span>{{ item.time }}</span>
            <a href="###">
              <img :src="item.img" alt v-lazy="item.img" />
              <p v-html="item.price"></p>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import appHeader from "../components/header";
import goodsApi from "../api/goodsApi";
import { Lazyload } from 'vant';
export default {
  data() {
    return {
      isshow: true,
      list: []
    };
  },

  components: {
    appHeader //引入模块
  },
  // created(){
  //   goods
  //       .getGoods({ type: "home" })
  //       .then(res => {
  //         console.log(res.data);
  //         // this.dataList = res.data[0];
  //         // this.sizes = this.dataList.sizes;
  //         this.list = res.data
  //         // console.log(this.dataList);
  //         // console.log(this.dataList.sizes.size);
  //         // console.log(this.sizes);
  //       })
  //       .catch(err => {
  //         console.log(err);
  //       });
  // },
  methods: {
    getData() {
      //发请求 
      goodsApi
        .getGoods({ type: "Home" })
        .then(res => {
          this.list = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    //请求数据  利用钩子
    this.getData();
  }

  // watch: {
  //   $event: {
  //     deep: true,
  //     handler(val) {
  //       console.log(val, 1);
  //     }
  //   }
  // }
};
</script>

<style scoped lang='scss'>
@import "@/assets/sass/common.scss";
@import "@/assets/sass/vw.scss";
body {
  display: flex;
  flex-direction: column;
  // overflow: hidden;
}
.heavy {
  flex: 1;
}
.banner {
  flex: 1;
  overflow-y: hidden;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    height: vw(260);
    width: vw(700);
    img {
      height: 100%;
      width: 100%;
    }
  }
}
img {
  width: vw(750);
  height: 100%;
}
.content_top {
  height: vw(380);
  width: vw(750);
  background-color: rgb(245, 245, 245);
  overflow-x: hidden;
  .content_top_a {
    //background: darkorange;
    height: vw(190);
    display: flex;
    img {
      height: 100%;
      width: vw(375);
    }
    div {
      display: flex;
      width: vw(375);
      height: vw(190);
      img {
        width: vw(188);
        height: 100%;
      }
    }
  }
  .content_top_b {
    height: vw(190);
    display: flex;
    img {
      width: vw(187.5);
      height: 100%;
    }
  }
}
.content_top_aaa {
  display: flex;
  a {
    width: 50%;
    img {
      height: 100%;
      width: 100%;
    }
  }
}
.sports {
  .sports_top {
    display: flex;
    img {
      width: 50%;
      height: 100%;
    }
  }
  .sports_under {
    display: flex;
    img {
      width: 50%;
      height: 100%;
    }
  }
}
.content_top_bbb {
  display: flex;
  a {
    width: 50%;
    img {
      height: 100%;
      width: 100%;
    }
  }
}
.relaxation {
  display: flex;
  justify-content: space-around;
  img {
    width: 33.33%;
  }
}
.shoe {
  display: flex;
  img {
    width: 50%;
  }
}
#top {
  position: fixed;
  bottom: vw(300);
  right: 0;
}
.goods {
  color: red;
  position: relative;
  font-size: vw(26);
  padding-left: vw(10);
  height: vw(44);
  width: vw(160);
}
.goods::after {
  display: block;
  width: vw(105);
  height: 1.4px;
  background: red;
  position: absolute;
  content: "";
  //left: 50%;
  // margin-left: -47px;
  bottom: vw(3);
}
.list {
  span {
    position: absolute;
    background: rgba($color: #000000, $alpha: 0.5);
    color: white;
    right: 0;
    font-size: vw(24);
    width: vw(156);
    height: vw(42);
    line-height: vw(42);
    text-align: center;
  }
  a p {
    font-size: vw(28);
    height: vw(82);
    color: pink;
    width: vw(720);
    line-height: vw(82);
    margin-left: vw(15);
    position: relative;
  }
  p::after {
    display: block;
    width: vw(720);
    height: 0.5px;
    background: #e5e5e5;
    position: absolute;
    content: "";
    bottom: vw(15);
  }
}
.height{
  height:vw(100)
}
</style>